<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="theme" content="Chirpy v2.5.1">
		<meta name="generator" content="Jekyll v4.1.1" />
		<meta property="og:title" content="jianxiaochong" />
		<meta name="author" content="jianxiaochong" />
		<meta property="og:locale" content="en_US" />
		<meta name="description" content="A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation."
		/>
		<meta property="og:description" content="A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation."
		/>
		<link rel="canonical" href="https://jianxiaochong.github.io/" />
		<meta property="og:url" content="https://jianxiaochong.github.io/" />
		<meta property="og:site_name" content="jianxiaochong" />
		<meta name="twitter:card" content="summary" />
		<meta property="twitter:title" content="jianxiaochong" />
		<meta name="twitter:site" content="@jianxiaochong" />
		<meta name="twitter:creator" content="@jianxiaochong" />
		<meta name="google-site-verification" content="google_meta_tag_verification"
		/>
		<script type="application/ld+json">
			{
				"author": {
					"@type": "Person",
					"name": "Cotes Chung"
				},
				"description": "A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation.",
				"@type": "WebPage",
				"url": "https://jianxiaochong.github.io/categories/blogging/",
				"headline": "Blogging",
				"@context": "https://schema.org"
			}
		</script>
		<title>
			favicon | jianxiaochong
		</title>
		<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon.png">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon-precomposed.png">
		<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicons/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicons/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicons/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicons/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicons/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicons/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicons/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicons/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicons/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
		<link rel="manifest" href="/assets/img/favicons/manifest.json">
		<meta name='msapplication-config' content='/assets/img/favicons/browserconfig.xml'>
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/assets/img/favicons/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://fonts.gstatic.com">
		<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
		<link rel="dns-prefetch" href="https://www.google-analytics.com">
		<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://www.googletagmanager.com">
		<link rel="preconnect" href="https://chirpy-demo.appspot.com" crossorigin="use-credentials">
		<link rel="dns-prefetch" href="https://chirpy-demo.appspot.com">
		<link rel="preconnect" href="cdn.jsdelivr.net">
		<link rel="dns-prefetch" href="cdn.jsdelivr.net">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
		integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
		integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous">
		<link rel="preload" href="/assets/css/category-tag.css" as="style">
		<link rel="stylesheet" href="/assets/css/category-tag.css">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js">
		</script>
		<script async src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js">
		</script>
		<script async src="/assets/js/page.min.js">
		</script>
		<script defer src="/app.js">
		</script>
		<body data-spy="scroll" data-target="#toc">
			<div id="sidebar" class="d-flex flex-column">
				<div id="nav-wrapper">
					<div id="profile-wrapper" class="d-flex flex-column">
						<div id="avatar" class="d-flex justify-content-center">
							<a href="/" alt="avatar">
								<img src="/assets/img/sample/avatar.jpg" alt="avatar" onerror="this.style.display='none'">
							</a>
						</div>
						<div class="profile-text mt-3">
							<div class="site-title">
								<a href="/">
									jianxiaochong
								</a>
							</div>
							<div class="site-subtitle font-italic">
								简小虫 丨个人博客
							</div>
						</div>
					</div>
					<ul class="nav flex-column">
						<li class="nav-item d-flex justify-content-center ">
							<a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
								<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded">
								</i>
								<span>
									HOME
								</span>
							</a>
							<li class="nav-item d-flex justify-content-center ">
								<a href="/tabs/categories/" class="nav-link d-flex justify-content-center align-items-center w-100">
									<i class="fa-fw fas fa-stream ml-xl-3 mr-xl-3 unloaded">
									</i>
									<span>
										CATEGORIES
									</span>
								</a>
								<li class="nav-item d-flex justify-content-center active">
									<a href="/tabs/tags/" class="nav-link d-flex justify-content-center align-items-center w-100">
										<i class="fa-fw fas fa-tags ml-xl-3 mr-xl-3 unloaded">
										</i>
										<span>
											TAGS
										</span>
									</a>
									<li class="nav-item d-flex justify-content-center ">
										<a href="/tabs/archives/" class="nav-link d-flex justify-content-center align-items-center w-100">
											<i class="fa-fw fas fa-archive ml-xl-3 mr-xl-3 unloaded">
											</i>
											<span>
												ARCHIVES
											</span>
										</a>
										<li class="nav-item d-flex justify-content-center ">
											<a href="/tabs/about/" class="nav-link d-flex justify-content-center align-items-center w-100">
												<i class="fa-fw fas fa-info ml-xl-3 mr-xl-3 unloaded">
												</i>
												<span>
													ABOUT
												</span>
											</a>
					</ul>
				</div>
				<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
					<span id="mode-toggle-wrapper">
						<i class="mode-toggle fas fa-sun" dark-mode-invisible>
						</i>
						<i class="mode-toggle fas fa-moon" light-mode-invisible>
						</i>
						<script type="text/javascript">
							class ModeToggle {
								static get MODE_KEY() {
									return "mode";
								}
								static get DARK_MODE() {
									return "dark";
								}
								static get LIGHT_MODE() {
									return "light";
								}
								constructor() {
									if (this.mode != null) {
										if (this.mode == ModeToggle.DARK_MODE) {
											if (!this.isSysDarkPrefer) {
												this.setDark();
											}
										} else {
											if (this.isSysDarkPrefer) {
												this.setLight();
											}
										}
									}
									var self = this;
									/* always follow the system prefers */
									this.sysDarkPrefers.addListener(function() {
										if (self.mode != null) {
											if (self.mode == ModeToggle.DARK_MODE) {
												if (!self.isSysDarkPrefer) {
													self.setDark();
												}
											} else {
												if (self.isSysDarkPrefer) {
													self.setLight();
												}
											}
											self.clearMode();
										}
									});
								}
								/* constructor() */
								setDark() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
								}
								setLight() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
								}
								clearMode() {
									$('html').removeAttr(ModeToggle.MODE_KEY);
									sessionStorage.removeItem(ModeToggle.MODE_KEY);
								}
								get sysDarkPrefers() {
									return window.matchMedia("(prefers-color-scheme: dark)");
								}
								get isSysDarkPrefer() {
									return this.sysDarkPrefers.matches;
								}
								get isDarkMode() {
									return this.mode == ModeToggle.DARK_MODE;
								}
								get isLightMode() {
									return this.mode == ModeToggle.LIGHT_MODE;
								}
								get hasMode() {
									return this.mode != null;
								}
								get mode() {
									return sessionStorage.getItem(ModeToggle.MODE_KEY);
								}
								flipMode() {
									if (this.hasMode) {
										if (this.isSysDarkPrefer) {
											if (this.isLightMode) {
												this.clearMode();
											} else {
												this.setLight();
											}
										} else {
											if (this.isDarkMode) {
												this.clearMode();
											} else {
												this.setDark();
											}
										}
									} else {
										if (this.isSysDarkPrefer) {
											this.setLight();
										} else {
											this.setDark();
										}
									}
								}
								/* flipMode() */
							}
							/* ModeToggle */
							let toggle = new ModeToggle();
							$(".mode-toggle").click(function() {
								toggle.flipMode();
							});
						</script>
					</span>
					<span class="icon-border">
					</span>
					<a href="https://github.com/jianxiaochong" aria-label="github" target="_blank"
					rel="noopener">
						<i class="fab fa-github-alt">
						</i>
					</a>
					<a href="https://twitter.com/jianxiaochong" aria-label="twitter" target="_blank"
					rel="noopener">
						<i class="fab fa-twitter">
						</i>
					</a>
					<a href=" javascript:location.href = 'mailto:' + ['cotes.chung','gmail.com'].join('@')"
					aria-label="email">
						<i class="fas fa-envelope">
						</i>
					</a>
					<a href="/feed.xml" aria-label="rss">
						<i class="fas fa-rss">
						</i>
					</a>
				</div>
			</div>
			<div id="topbar-wrapper" class="row justify-content-center topbar-down">
				<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
					<span id="breadcrumb">
						<span>
							<a href="/">
								Home
							</a>
						</span>
						<span>
							<a href="/tabs/tags/">
								Tags
							</a>
						</span>
						<span>
							favicon
						</span>
					</span>
					<i id="sidebar-trigger" class="fas fa-bars fa-fw">
					</i>
					<div id="topbar-title">
						Tag
					</div>
					<i id="search-trigger" class="fas fa-search fa-fw">
					</i>
					<span id="search-wrapper" class="align-items-center">
						<i class="fas fa-search fa-fw">
						</i>
						<input class="form-control" id="search-input" type="search" aria-label="search"
						placeholder="Search...">
						<i class="fa fa-times-circle fa-fw" id="search-cleaner">
						</i>
					</span>
					<span id="search-cancel">
						Cancel
					</span>
				</div>
			</div>
			<div id="main-wrapper">
				<div id="main">
					<div class="row">
						<div class="col-12 col-lg-11 col-xl-8">
							<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 mb-md-4">
								<div id="page-tag">
									<h1 class="pl-lg-2">
										<i class="fa fa-tag fa-fw text-muted">
										</i>
										favicon
										<span class="lead text-muted pl-2">
											1
										</span>
									</h1>
									<ul class="post-content pl-0">
										<li class="d-flex justify-content-between pl-md-3 pr-md-3">
											<a href="/posts/customize-the-favicon/">
												Customize the Favicon
											</a>
											<span class="dash flex-grow-1">
											</span>
											<span class="text-muted small">
												Aug 11, 2019
											</span>
									</ul>
								</div>
							</div>
						</div>
						<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
							<div class="access">
								<div id="access-lastmod" class="post">
									<span>
										Recent Update
									</span>
									<ul class="post-content pl-0 pb-1 ml-1 mt-2">
										<li>
											<a href="/posts/customize-the-favicon/">
												Customize the Favicon
											</a>
											<li>
												<a href="/posts/text-and-typography/">
													Text and Typography
												</a>
												<li>
													<a href="/posts/getting-started/">
														Getting Started
													</a>
													<li>
														<a href="/posts/write-a-new-post/">
															Writing a New Post
														</a>
									</ul>
								</div>
								<div id="access-tags">
									<span>
										Trending Tags
									</span>
									<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
										<a class="post-tag" href="/tags/favicon/">
											favicon
										</a>
										<a class="post-tag" href="/tags/getting-started/">
											getting started
										</a>
										<a class="post-tag" href="/tags/typography/">
											typography
										</a>
										<a class="post-tag" href="/tags/writing/">
											writing
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<footer class="d-flex w-100 justify-content-center">
						<div class="d-flex justify-content-between align-items-center">
							<div class="footer-left">
								<p class="mb-0">
									© 2020
									<a href="https://github.com/jianxiaochong">
										jianxiaochong
									</a>
									.
									<span data-toggle="tooltip" data-placement="top" title="The blog posts are licensed under the CC BY 4.0 License, and the source code for the project is licensed under MIT License.">
										Some rights reserved.
									</span>
								</p>
							</div>
							<div class="footer-right">
								<p class="mb-0">
									Powered by
									<a href="https://jekyllrb.com" target="_blank" rel="noopener">
										Jekyll
									</a>
									with
									<a href="https://github.com/jianxiaochong" target="_blank"
									rel="noopener">
										jianxiaochong
									</a>
									theme.
								</p>
							</div>
						</div>
					</footer>
				</div>
				<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
					<div class="col-12 col-xl-11 post-content">
						<div id="search-hints">
							<h4 class="text-muted mb-4">
								Trending Tags
							</h4>
							<a class="post-tag" href="/tags/favicon/">
								favicon
							</a>
							<a class="post-tag" href="/tags/getting-started/">
								getting started
							</a>
							<a class="post-tag" href="/tags/typography/">
								typography
							</a>
							<a class="post-tag" href="/tags/writing/">
								writing
							</a>
						</div>
						<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3">
						</div>
					</div>
				</div>
			</div>
			<div id="mask">
			</div>
			<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow"
			role="button">
				<i class="fas fa-angle-up">
				</i>
			</a>
			<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js">
			</script>
			<script>
				SimpleJekyllSearch({
					searchInput: document.getElementById('search-input'),
					resultsContainer: document.getElementById('search-results'),
					json: '/assets/js/data/search.json',
					searchResultTemplate: '<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0"> <a href="https://chirpy.cotes.info{url}">{title}</a><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"><div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div><div><i class="fa fa-tag fa-fw"></i>{tags}</div></div><p>{snippet}</p></div>',
					noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
				});
			</script>
			<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145932385-1">
			</script>
			<script>
				window.dataLayer = window.dataLayer || [];
				function gtag() {
					dataLayer.push(arguments);
				}
				gtag('js', new Date());
				gtag('config', 'UA-145932385-1');
			</script>